<template>
  <div class="step1">
    <!-- 微信对接 -->
    <div class="title" v-if="type === 'add'">
      {{$t('configLazyLoad.channel.wexinTip87')}}
    </div>
    <div class="step1form">
      <el-form :model.trim="step1form" label-position="left" label-width="150px" :rules="formRules" ref="step1form">
        <el-form-item :label="$t('configLazyLoad.channel.wechatName')" prop="nick_name">
          <el-input v-model.trim="step1form.nick_name"></el-input>
        </el-form-item>
        <el-form-item :label="$t('configLazyLoad.channel.wexinTip88')" prop="authorizer_appid">
          <el-input v-model.trim="step1form.authorizer_appid"></el-input>
        </el-form-item>
        <el-form-item :label="$t('configLazyLoad.channel.wexinTip89')" prop="sendUrl">
          <el-input v-model.trim="step1form.sendUrl"></el-input>
        </el-form-item>
        <el-form-item :label="$t('config.channel.ensSessionPush')" prop="finishCallback">
          <el-radio class="radio" v-model.trim="step1form.finishCallback" label="1">{{$t('public.yes')}}</el-radio>
          <el-radio class="radio statis-radio" v-model.trim="step1form.finishCallback" label="0">{{$t('public.no')}}</el-radio>
        </el-form-item>
        <el-form-item :label="$t('config.channel.dvePwd')" prop="appSecret">
                   <el-input v-model.trim="step1form.appSecret" type="password"></el-input>
        </el-form-item>
        <el-form-item :label="$t('config.channel.authorizationPush')" prop="snsapiUserinfoFlag">
          <el-radio-group v-model.trim="step1form.snsapiUserinfoFlag">
               <el-radio class="radio"  :label="true">{{$t('public.yes')}}</el-radio>
                <el-radio class="radio statis-radio"  :label="false">{{$t('public.no')}}</el-radio>
          </el-radio-group>
           <question-tooltip
                  class="wechatPlatformTooltip"
                  :direction="'bottom'"
                  :tipContent="$t('configLazyLoad.channel.turnTip8')">
          </question-tooltip>
        </el-form-item>
        <el-form-item :label="$t('config.channel.msgToPeer')" prop="to_peer">
          <el-select size="mini" v-model.trim="step1form.to_peer" :placeholder="$t('public.pleasePick')">
            <el-option
              v-for="(item, index) in peerOptions"
              :key="index"
              :label="item.DisplayName"
              :value="item.Exten"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="step1button">
      <el-button class="primary_btn" style="margin-right: 20px" @click="step1Cancel" v-if="type === 'add'">{{$t('public.cancel')}}</el-button>
      <el-button type="primary" class="primary_btn" @click="step1Confirm">{{type === 'add' ? $t('public.nextStep') : $t('public.save')}}</el-button>
    </div>
  </div>
</template>

<script>
  import questionTooltip from '@/components/ui-modules/questionToolTip/QuestionToolTip.vue'
  import {deepClone} from '@/utils/m7Utils'
  export default {
    name: 'weixinDockInfo',
    data () {
      return {
        step1form: {
          nick_name: '',
          authorizer_appid: '',
          sendUrl: '',
          to_peer: '',
          finishCallback: '0',
          snsapiUserinfoFlag: false,
          appSecret: ''
        },
        peerOptions: [],
        formRules: {
          nick_name: [
            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
          ],
          authorizer_appid: [
            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
          ],
          sendUrl: [
            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
          ],
          to_peer: [
            {required: true, message: this.$t('validate.required'), trigger: 'change'}
          ],
          snsapiUserinfoFlag: [
            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
          ]
        }
      }
    },
    props: ['weixindata', 'type'],
    methods: {
      step1Cancel () {
        this.$emit('cancel')
      },
      step1Confirm () {
         if(this.step1form.snsapiUserinfoFlag&&!this.step1form.appSecret){
          this.$message.error(this.$t('configLazyLoad.channel.robotError5'))
          return
        }
        if (this.peerOptions.length === 0) {
          this.$message.error(this.$t('configLazyLoad.channel.robotError4'))
          return
        }
        this.$refs.step1form.validate((valid) => {
          if (valid) {
            if (this.type === 'add') {
              this.$store.dispatch('SaveWeChatDock', this.step1form).then(req => {
                if (req.success) {
                  this.$emit('saveDone', this.step1form.authorizer_appid)
                }
              })
            } else {
              this.$store.dispatch('EditWeChatDock', this.step1form).then(req => {
                if (req.success) {
                  this.$message.success(this.$t('business.updateSuccess'))
                }
              })
            }
          }
        })
      }
    },
    components: {
      questionTooltip
    },
    beforeMount () {
      if (this.weixindata !== undefined) {
        this.step1form = deepClone(this.weixindata)
        if (!this.step1form.finishCallback) {
          this.$set(this.step1form, 'finishCallback', '0')
        }
        if (!this.step1form.snsapiUserinfoFlag) {
          this.$set(this.step1form, 'snsapiUserinfoFlag', false)
        }
      }
      this.$store.dispatch('getCache', { type: 'mailQueues' }).then(req => {
        let mailQueues = req
        if (!mailQueues || mailQueues.length === 0) {
          this.$message.error(this.$t('configLazyLoad.channel.robotError4'))
          return
        }
        this.peerOptions = mailQueues || []
      })
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .wechatPlatformTooltip
    position absolute
    right -25px
  .step1
    text-align center
    .title
      font-size 18px
      margin: 5px
    .step1form
      width: 425px
      margin: 0 auto
    .el-select
      width 100%
    .step1button
      margin 20px 0
</style>
